<template>
  <div class="flex">
    <div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-table
          ref="multipleTable"
          :data="list"
          max-height="360"
          row-key="UserId"
          @selection-change="chooseProFn"
        >
          <el-table-column
            prop="UserId"
            :reserve-selection="true"
            type="selection"
            width="55"
          />
          <!-- <el-table-column label="头像" prop="mid" /> -->
          <el-table-column label="名字" prop="RealName" />
        </el-table>
      </el-scrollbar>
      <span class="dialog-footer">
        <el-button class="settingBtn" @click="onSureFn">取 消</el-button>
        <el-button class="settingBtn" type="primary" @click="onSureFn">
          确 定
        </el-button>
      </span>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  import { GetPageData } from '@/api/form'
  export default defineComponent({
    components: {},
    // eslint-disable-next-line vue/require-prop-types
    props: ['aaa'],
    emits: ['on-surefn'],
    setup(props, { emit }) {
      const state = reactive({
        personnelList: [],
        list: [],
      })
      const onSureFn = () => {
        console.log(state.personnelList)
        emit('on-surefn', state.personnelList)
      }
      const chooseProFn = (rows) => {
        state.personnelList = rows
      }
      const GetPageDatalist = async () => {
        const params = {
          pageNo: 0,
          pageSize: 1000,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: false,
          value: '',
        }
        const data = await GetPageData(params)
        if (data.code == '200') {
          state.list = data.data.rows
        }
      }
      onActivated(() => {
        console.log('xxx')
      })
      GetPageDatalist()
      return {
        ...toRefs(state),
        onSureFn,
        chooseProFn,
        GetPageDatalist,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .dialog-footer {
    display: block;
    margin-top: 20px;
    text-align: end;
  }
</style>
